<template>
  <a-layout id="components-layout" style="min-height: 100vh">
    <a-layout-sider
      v-model="collapsed"
      breakpoint="lg"
      collapsedWidth="80"
      @breakpoint="onBreakpoint"
    >
      <div class="logo">
        <span style="color:#0da29d;font-size: 30px;">JH</span>
        <span
          v-show="logoTxtShow"
          style="color:white;font-size: 30px;margin-left: 10px;"
        >设备管理</span>
      </div>
      <a-menu
        theme="dark"
        :defaultSelectedKeys="[defaultSelectedKeys]"
        :defaultOpenKeys="[defaultOpenKeys]"
        mode="inline"
      >
        <template v-for="item in systemMenu">
          <a-menu-item
            v-if="item.isUse && !item.haveSubMenu"
            :key="item.MenuCode"
            @click="MenuClick(item.MenuCode)"
          >
    <!--       theme="twoTone" two-tone-color="#52c41a" -->
            <a-icon :type="item.icon"   spin/>
            <span>{{item.MenuName}}</span>
          </a-menu-item>
          <a-sub-menu v-else-if="item.isUse && item.haveSubMenu" :key="item.MenuCode">
            <span slot="title">
              <a-icon :type="item.icon"  />
              <span>{{item.MenuName}}</span>
            </span>
            <template v-for="item_sub in item.subMenu">
              <a-menu-item
                v-if="item_sub.isUse"
                :key="item_sub.MenuCode"
                @click="MenuClick(item_sub.MenuCode)"
              >{{item_sub.MenuName}}</a-menu-item>
            </template>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
      </a-layout-header>
      <a-layout-content :style="{ margin: '16px 16px',  background: '#fff', minHeight: '280px' , overflow: 'initial' }">
        <router-view />
      </a-layout-content>
   <!--    <a-layout-footer style="text-align: center">
        <copy-right></copy-right>
      </a-layout-footer> -->
    </a-layout>
  </a-layout>
</template>
<script>
/* import CopyRight from "@/views/layouts/foot/CopyRight"; */
import systemMenu from "@/config/systemMenu";
// import { delimiter } from "path";

export default {
/*   components: {
    CopyRight
  }, */
  data() {
    return {
      //默认选中菜单
      defaultSelectedKeys: "stateOnline",
      //默认展开菜单
      defaultOpenKeys: "infoOnline",
      collapsed: true,
      logoTxtShow: true,
      systemMenu: systemMenu.Menu
    };
  },
  watch: {
    collapsed: function(val) {
      if (val === false) {
        setTimeout(() => {
          this.logoTxtShow = !val;
        }, 200);
      } else {
        this.logoTxtShow = !val;
      }
    }
  },
  methods: {
    MenuClick(flag) {
    /*   this.$notification.open({
        message: flag,
        description: "点击菜单啦.",
        onClick: () => {
          console.log("Notification Clicked!");
        }
      }); */

      this.$router.push({ path: flag });
    },
    onBreakpoint() {
    }
  }
};
</script>

<style lang="less" scoped>
#components-layout {
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    margin-top: 10px;
  }
  .trigger :hover {
    color: #1890ff;
  }
  .logo {
    height: 32px;
    margin: 16px;
  }
}
</style>

